<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FolloDown</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-slider.css">
    <link rel="stylesheet" href="/css/bootstrap-switch.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap-slider.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/echarts.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/bootstrap-switch.js"></script>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/index/">控制面板</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/state/">系统状态</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="content">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                运动控制
            </h3>
        </div>
        <div class="panel-body">
            <div class="col-md-6">
                <img id="image_stream" src="https://static.runoob.com/images/mix/img_avatar.png" width="100%">
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_follow" class="bs-example ">
                            <button onclick="button_up_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">Up
                            </button>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_front" class="bs-example ">
                            <button onclick="button_front_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">前进
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_control" class="bs-example">
                            <button onclick="button_down_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">Down
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_left" class="bs-example ">
                            <button onclick="button_left_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">左转
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_stop" class="bs-example ">
                            <button onclick="button_stop_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">停止
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_right" class="bs-example">
                            <button onclick="button_right_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">右转
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_ac" class="bs-example">
                            <button onclick="button_ac_click()" type="button" class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">左旋
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_line" class="bs-example ">
                            <button onclick="button_back_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">后退
                            </button>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_cw" class="bs-example">
                            <button onclick="button_cw_click()" type="button" class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">右旋
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_record" class="bs-example">
                            <button onclick="button_record_click(this)" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">录制
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <input type="checkbox" class="bootstrap-switch-label" data-label-width="200"
                               id="switch-ekf_control">
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <input type="checkbox" class="bootstrap-switch-label" data-label-width="200"
                               id="switch-auto_control">
                    </div>
                </div>
            </div>
            <div class="col-md-6" style="display: none">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            SystemState
                        </h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>ValueName</th>
                                <th>Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Altitude</td>
                                <td id="altitude">0</td>
                            </tr>
                            <tr>
                                <td>forward_m_s</td>
                                <td id="forward_m_s">0</td>
                            </tr>
                            <tr>
                                <td>right_m_s</td>
                                <td id="right_m_s">0</td>
                            </tr>
                            <tr>
                                <td>yawspeed_deg_s</td>
                                <td id="yawspeed_deg_s">0</td>
                            </tr>
                            <tr>
                                <td>absolute_altitude_m</td>
                                <td id="absolute_altitude_m">0</td>
                            </tr>
                            <tr>
                                <td>latitude_deg</td>
                                <td id="latitude_deg">0</td>
                            </tr>
                            <tr>
                                <td>longitude_deg</td>
                                <td id="longitude_deg">0</td>
                            </tr>
                            <tr>
                                <td>s_flight_mode</td>
                                <td id="s_flight_mode">0</td>
                            </tr>
                            <tr>
                                <td>Distance</td>
                                <td id="distance">0</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            SystemState
        </h3>
    </div>
    <div class="panel-body">
        <div id="chart_speed" class='col-md-6' style="height:300px;">

        </div>

        <div id="chart_mag" class='col-md-6' style="height:300px;">

        </div>

        <div id="chart_acc" class='col-md-6' style="height:300px;">

        </div>
        <div id="chart_angle" class='col-md-6' style="height:300px;">

        </div>
        <div id="chart_location_trans" class='col-md-6' style="height:300px;">

        </div>
        <div id="chart_location_euler" class='col-md-6' style="height:300px;">

        </div>
    </div>
</div>
</div>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/settings",
            dataType: "JSON",
            success: function (ready_result) {
                console.log(ready_result);
                $("#switch-ekf_control").bootstrapSwitch({
                    size: "large",
                    onText: "开",
                    offText: "关",
                    labelText: "EKF",
                    state: ready_result["EKF_ON"],
                    onSwitchChange: function (event, state) {//控件状态改变时触发
                        send_command("/settings/ekfswitch");
                    }
                });
                $("#switch-auto_control").bootstrapSwitch({
                    size: "large",
                    onText: "开",
                    offText: "关",
                    labelText: "自动控制",
                    state: ready_result["AUTO_CONTROL"],
                    onSwitchChange: function (event, state) {//控件状态改变时触发
                        send_command("/settings/autocontrol");
                    }
                });
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });
</script>
<script>


</script>
<script>
    // var video_frame = setInterval("video()", 100);
    // var info_frame = setInterval("stateinfo()", 20);

    var chart_acc_dom = document.getElementById('chart_acc');
    var chart_gyro_dom = document.getElementById('chart_speed');
    var chart_mag_dom = document.getElementById('chart_mag');
    var chart_angle_dom = document.getElementById('chart_angle');
    var chart_location_trans_dom = document.getElementById('chart_location_trans');
    var chart_location_euler_dom = document.getElementById('chart_location_euler');

    var mychart_mag = echarts.init(chart_mag_dom);
    var mychart_acc = echarts.init(chart_acc_dom);
    var mychart_gyro = echarts.init(chart_gyro_dom);
    var mychart_angle = echarts.init(chart_angle_dom);
    var mychart_location_trans = echarts.init(chart_location_trans_dom);
    var mychart_location_euler = echarts.init(chart_location_euler_dom);

    var option_acc;
    var option_gyro;
    var option_mag;
    var option_angle;
    var option_location_trans;
    var option_location_euler;


    {
        var IMU_ACC_X_DATA = [];
        var IMU_ACC_Y_DATA = [];
        var IMU_ACC_Z_DATA = [];
        var EKF_IMU_ACC_X_DATA = [];
        var EKF_IMU_ACC_Y_DATA = [];
        var EKF_IMU_ACC_Z_DATA = [];

        var IMU_GYRO_X_DATA = [];
        var IMU_GYRO_Y_DATA = [];
        var IMU_GYRO_Z_DATA = [];
        var EKF_IMU_GYRO_X_DATA = [];
        var EKF_IMU_GYRO_Y_DATA = [];
        var EKF_IMU_GYRO_Z_DATA = [];

        var IMU_ANGLE_X_DATA = [];
        var IMU_ANGLE_Y_DATA = [];
        var IMU_ANGLE_Z_DATA = [];
        var EKF_IMU_ANGLE_X_DATA = [];
        var EKF_IMU_ANGLE_Y_DATA = [];
        var EKF_IMU_ANGLE_Z_DATA = [];

        var IMU_MAG_X_DATA = [];
        var IMU_MAG_Y_DATA = [];
        var IMU_MAG_Z_DATA = [];
        var EKF_IMU_MAG_X_DATA = [];
        var EKF_IMU_MAG_Y_DATA = [];
        var EKF_IMU_MAG_Z_DATA = [];

        var ekf_forward_m_s_data = [];
        var ekf_yawspeed_deg_s_data = [];
        var ekf_right_m_s_data = [];

        var latitude_deg_data = [];
        var longitude_deg_data = [];
        var ekf_latitude_deg_data = [];
        var ekf_longitude_deg_data = [];

        var TRANS_X_data = [];
        var TRANS_Y_data = [];
        var TRANS_Z_data = [];
        var EKF_TRANS_X_data = [];
        var EKF_TRANS_Y_data = [];
        var EKF_TRANS_Z_data = [];

        var EULAR_X_data = [];
        var EULAR_Y_data = [];
        var EULAR_Z_data = [];
        var EKF_EULAR_X_data = [];
        var EKF_EULAR_Y_data = [];
        var EKF_EULAR_Z_data = [];
    }

    option_acc = {
        title: {
            text: 'Acc'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: 'IMU_ACC_X_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_ACC_X_DATA
        }, {
            name: 'IMU_ACC_Y_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_ACC_Y_DATA
        }, {
            name: 'IMU_ACC_Z_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_ACC_Z_DATA
        }, {
            name: 'EKF_IMU_ACC_X_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_ACC_X_DATA
        }, {
            name: 'EKF_IMU_ACC_Y_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_ACC_Y_DATA
        }, {
            name: 'EKF_IMU_ACC_Z_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_ACC_Z_DATA
        }
        ]
    };
    option_gyro = {
        title: {
            text: 'Gyro'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: 'IMU_GYRO_X_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_GYRO_X_DATA
        }, {
            name: 'IMU_GYRO_Y_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_GYRO_Y_DATA
        }, {
            name: 'IMU_GYRO_Z_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_GYRO_Z_DATA
        }, {
            name: 'EKF_IMU_GYRO_X_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_GYRO_X_DATA
        }, {
            name: 'EKF_IMU_GYRO_Y_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_GYRO_Y_DATA
        }, {
            name: 'EKF_IMU_GYRO_Z_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_GYRO_Z_DATA
        },
        ]
    };
    option_mag = {
        title: {
            text: 'Mag'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: 'IMU_MAG_X_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_MAG_X_DATA
        }, {
            name: 'IMU_MAG_Y_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_MAG_Y_DATA
        }, {
            name: 'IMU_MAG_Z_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_MAG_Z_DATA
        }, {
            name: 'EKF_IMU_MAG_X_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_MAG_X_DATA
        }, {
            name: 'EKF_IMU_MAG_Y_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_MAG_Y_DATA
        }, {
            name: 'EKF_IMU_MAG_Z_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_MAG_Z_DATA
        }
        ]
    };
    option_angle = {
        title: {
            text: 'Angle'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: 'IMU_ANGLE_X_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_ANGLE_X_DATA
        }, {
            name: 'IMU_ANGLE_Y_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_ANGLE_Y_DATA
        }, {
            name: 'IMU_ANGLE_Z_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: IMU_ANGLE_Z_DATA
        }, {
            name: 'EKF_IMU_ANGLE_X_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_ANGLE_X_DATA
        }, {
            name: 'EKF_IMU_ANGLE_Y_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_ANGLE_Y_DATA
        }, {
            name: 'EKF_IMU_ANGLE_Z_DATA',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_IMU_ANGLE_Z_DATA
        }
        ]
    };
    option_location_trans = {
        title: {
            text: 'location_trans'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: 'TRANS_X',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: TRANS_X_data
        }, {
            name: 'TRANS_Y',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: TRANS_Y_data
        }, {
            name: 'EKF_TRANS_X',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_TRANS_X_data
        }, {
            name: 'EKF_TRANS_Y',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_TRANS_Y_data
        },
        ]
    };
    option_location_euler = {
        title: {
            text: 'location_euler'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: 'EULAR_X',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EULAR_X_data
        }, {
            name: 'EULAR_Y',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EULAR_Y_data
        }, {
            name: 'EKF_EULAR_X',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_EULAR_X_data
        }, {
            name: 'EKF_EULAR_Y',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: EKF_EULAR_Y_data
        },
        ]
    };

    mychart_angle.setOption(option_angle);
    mychart_mag.setOption(option_mag);
    mychart_gyro.setOption(option_gyro);
    mychart_acc.setOption(option_acc);
    mychart_location_trans.setOption(option_location_trans);
    mychart_location_euler.setOption(option_location_euler);


    function stateinfo() {
        $.ajax({
            url: '/stateinfo/',
            async: true,
            dataType: "json",
            type: 'get',
            success: function (data) {
                $("#absolute_altitude_m").html(data['absolute_altitude_m']);
                $("#altitude").html(data['Altitude']);
                $("#forward_m_s").html(data['forward_m_s']);
                $("#right_m_s").html(data['right_m_s']);
                $("#yawspeed_deg_s").html(data['yawspeed_deg_s']);
                $("#latitude_deg").html(data['latitude_deg']);
                $("#longitude_deg").html(data['longitude_deg']);
                $("#s_flight_mode").html(data['s_flight_mode']);
                $("#TRANS_X").html(data['TRANS_X']);
                $("#TRANS_Y").html(data['TRANS_Y']);
                $("#TRANS_Z").html(data['TRANS_Z']);
                $("#EULAR_X").html(data['EULAR_X']);
                $("#EULAR_Y").html(data['EULAR_Y']);
                $("#EULAR_Z").html(data['EULAR_Z']);
                $("#distance").html(data['DISTANCE']);
                var _now_date = new Date();

                //======================================ACC============================
                var IMU_ACC_X = [_now_date, data['IMU_ACC_X']];
                IMU_ACC_X_DATA.push(IMU_ACC_X);
                var IMU_ACC_Y = [_now_date, data['IMU_ACC_Y']];
                IMU_ACC_Y_DATA.push(IMU_ACC_Y);
                var IMU_ACC_Z = [_now_date, data['IMU_ACC_Z']];
                IMU_ACC_Z_DATA.push(IMU_ACC_Z);

                var EKF_IMU_ACC_X = [_now_date, data['EKF_IMU_ACC_X']];
                EKF_IMU_ACC_X_DATA.push(EKF_IMU_ACC_X);
                var EKF_IMU_ACC_Y = [_now_date, data['EKF_IMU_ACC_Y']];
                EKF_IMU_ACC_Y_DATA.push(EKF_IMU_ACC_Y);
                var EKF_IMU_ACC_Z = [_now_date, data['EKF_IMU_ACC_Z']];
                EKF_IMU_ACC_Z_DATA.push(EKF_IMU_ACC_Z);
                //======================================END-ACC============================

                //======================================ANGLE============================
                var IMU_ANGLE_X = [_now_date, data['IMU_ANGLE_X']];
                IMU_ANGLE_X_DATA.push(IMU_ANGLE_X);
                var IMU_ANGLE_Y = [_now_date, data['IMU_ANGLE_Y']];
                IMU_ANGLE_Y_DATA.push(IMU_ANGLE_Y);
                var IMU_ANGLE_Z = [_now_date, data['IMU_ANGLE_Z']];
                IMU_ANGLE_Z_DATA.push(IMU_ANGLE_Z);

                var EKF_IMU_ANGLE_X = [_now_date, data['EKF_IMU_ANGLE_X']];
                EKF_IMU_ANGLE_X_DATA.push(EKF_IMU_ANGLE_X);
                var EKF_IMU_ANGLE_Y = [_now_date, data['EKF_IMU_ANGLE_Y']];
                EKF_IMU_ANGLE_Y_DATA.push(EKF_IMU_ANGLE_Y);
                var EKF_IMU_ANGLE_Z = [_now_date, data['EKF_IMU_ANGLE_Z']];
                EKF_IMU_ANGLE_Z_DATA.push(EKF_IMU_ANGLE_Z);
                //======================================END-ANGLE============================

                //======================================MAG================================
                var IMU_MAG_X = [_now_date, data['IMU_MAG_X']];
                IMU_MAG_X_DATA.push(IMU_MAG_X);
                var IMU_MAG_Y = [_now_date, data['IMU_MAG_Y']];
                IMU_MAG_Y_DATA.push(IMU_MAG_Y);
                var IMU_MAG_Z = [_now_date, data['IMU_MAG_Z']];
                IMU_MAG_Z_DATA.push(IMU_MAG_Z);

                var EKF_IMU_MAG_X = [_now_date, data['EKF_IMU_MAG_X']];
                EKF_IMU_MAG_X_DATA.push(EKF_IMU_MAG_X);
                var EKF_IMU_MAG_Y = [_now_date, data['EKF_IMU_MAG_Y']];
                EKF_IMU_MAG_Y_DATA.push(EKF_IMU_MAG_Y);
                var EKF_IMU_MAG_Z = [_now_date, data['EKF_IMU_MAG_Z']];
                EKF_IMU_MAG_Z_DATA.push(EKF_IMU_MAG_Z);
                //======================================END-MAG============================

                //======================================GYRO================================
                var IMU_GYRO_X = [_now_date, data['IMU_GYRO_X']];
                IMU_GYRO_X_DATA.push(IMU_GYRO_X);
                var IMU_GYRO_Y = [_now_date, data['IMU_GYRO_Y']];
                IMU_GYRO_Y_DATA.push(IMU_GYRO_Y);
                var IMU_GYRO_Z = [_now_date, data['IMU_GYRO_Z']];
                IMU_GYRO_Z_DATA.push(IMU_GYRO_Z);

                var EKF_IMU_GYRO_X = [_now_date, data['EKF_IMU_GYRO_X']];
                EKF_IMU_GYRO_X_DATA.push(EKF_IMU_GYRO_X);
                var EKF_IMU_GYRO_Y = [_now_date, data['EKF_IMU_GYRO_Y']];
                EKF_IMU_GYRO_Y_DATA.push(EKF_IMU_GYRO_Y);
                var EKF_IMU_GYRO_Z = [_now_date, data['EKF_IMU_GYRO_Z']];
                EKF_IMU_GYRO_Z_DATA.push(EKF_IMU_GYRO_Z);
                //======================================END-GYRO============================

                //======================================TRANS============================
                var TRANS_X = [_now_date, data['TRANS_X']];
                TRANS_X_data.push(TRANS_X);
                var TRANS_Y = [_now_date, data['TRANS_Y']];
                TRANS_Y_data.push(TRANS_Y);
                var TRANS_Z = [_now_date, data['TRANS_Z']];
                TRANS_Z_data.push(TRANS_Z);
                var EKF_TRANS_X = [_now_date, data['EKF_TX']];
                EKF_TRANS_X_data.push(EKF_TRANS_X);
                var EKF_TRANS_Y = [_now_date, data['EKF_TY']];
                EKF_TRANS_Y_data.push(EKF_TRANS_Y);
                var EKF_TRANS_Z = [_now_date, data['EKF_TZ']];
                EKF_TRANS_Z_data.push(EKF_TRANS_Z);
                //======================================END-TRANS============================

                //======================================EULAR============================
                var EULAR_X = [_now_date, data['EULAR_X']];
                EULAR_X_data.push(EULAR_X);
                var EULAR_Y = [_now_date, data['EULAR_Y']];
                EULAR_Y_data.push(EULAR_Y);
                var EULAR_Z = [_now_date, data['EULAR_Z']];
                EULAR_Z_data.push(EULAR_Z);
                var EKF_EULAR_X = [_now_date, data['EKF_EX']];
                EKF_EULAR_X_data.push(EKF_EULAR_X);
                var EKF_EULAR_Y = [_now_date, data['EKF_EY']];
                EKF_EULAR_Y_data.push(EKF_EULAR_Y);
                var EKF_EULAR_Z = [_now_date, data['EKF_EZ']];
                EKF_EULAR_Z_data.push(EKF_EULAR_Z);
                //======================================END-EULAR============================

                //======================================GPS============================
                var latitude_deg = [_now_date, data['latitude_deg']];
                latitude_deg_data.push(latitude_deg);
                var longitude_deg = [_now_date, data['longitude_deg']];
                longitude_deg_data.push(longitude_deg);
                var ekf_latitude_deg = [_now_date, data['EKF_LAT']];
                ekf_latitude_deg_data.push(ekf_latitude_deg);
                var ekf_longitude_deg = [_now_date, data['EKF_LNG']];
                ekf_longitude_deg_data.push(ekf_longitude_deg);
                //======================================END-GPS============================

                if (IMU_ACC_X_DATA.length > 100) {

                    //ACC
                    IMU_ACC_X_DATA.shift();
                    IMU_ACC_Y_DATA.shift();
                    IMU_ACC_Z_DATA.shift();
                    EKF_IMU_ACC_X_DATA.shift();
                    EKF_IMU_ACC_Y_DATA.shift();
                    EKF_IMU_ACC_Z_DATA.shift();

                    //MAG
                    IMU_MAG_X_DATA.shift();
                    IMU_MAG_Y_DATA.shift();
                    IMU_MAG_Z_DATA.shift();
                    EKF_IMU_MAG_X_DATA.shift();
                    EKF_IMU_MAG_Y_DATA.shift();
                    EKF_IMU_MAG_Z_DATA.shift();

                    //GYRO
                    IMU_GYRO_X_DATA.shift();
                    IMU_GYRO_Y_DATA.shift();
                    IMU_GYRO_Z_DATA.shift();
                    EKF_IMU_GYRO_X_DATA.shift();
                    EKF_IMU_GYRO_Y_DATA.shift();
                    EKF_IMU_GYRO_Z_DATA.shift();

                    //ANGLE
                    IMU_ANGLE_X_DATA.shift();
                    IMU_ANGLE_Y_DATA.shift();
                    IMU_ANGLE_Z_DATA.shift();
                    EKF_IMU_ANGLE_X_DATA.shift();
                    EKF_IMU_ANGLE_Y_DATA.shift();
                    EKF_IMU_ANGLE_Z_DATA.shift();

                    ekf_forward_m_s_data.shift();
                    ekf_right_m_s_data.shift();
                    ekf_yawspeed_deg_s_data.shift();

                    latitude_deg_data.shift();
                    longitude_deg_data.shift();
                    ekf_latitude_deg_data.shift();
                    ekf_longitude_deg_data.shift();

                    TRANS_X_data.shift();
                    TRANS_Y_data.shift();
                    TRANS_Z_data.shift();
                    EKF_TRANS_X_data.shift();
                    EKF_TRANS_Y_data.shift();
                    EKF_TRANS_Z_data.shift();

                    EULAR_X_data.shift();
                    EULAR_Y_data.shift();
                    EULAR_Z_data.shift();
                    EKF_EULAR_X_data.shift();
                    EKF_EULAR_Y_data.shift();
                    EKF_EULAR_Z_data.shift();
                }

                mychart_location_trans.setOption({
                    series: [{
                        data: TRANS_X_data
                    }, {
                        data: TRANS_Y_data
                    }, {
                        data: EKF_TRANS_X_data
                    }, {
                        data: EKF_TRANS_Y_data
                    },
                    ]
                });
                mychart_location_euler.setOption({
                    series: [{
                        data: EULAR_X_data
                    }, {
                        data: EULAR_Y_data
                    }, {
                        data: EKF_EULAR_X_data
                    }, {
                        data: EKF_EULAR_Y_data
                    },
                    ]
                });
                mychart_acc.setOption({
                    series: [{
                        data: IMU_ACC_X_DATA
                    }, {
                        data: IMU_ACC_Y_DATA
                    }, {
                        data: IMU_ACC_Z_DATA
                    }, {
                        data: EKF_IMU_ACC_X_DATA
                    }, {
                        data: EKF_IMU_ACC_Y_DATA
                    }, {
                        data: EKF_IMU_ACC_Z_DATA
                    },
                    ]
                });
                mychart_mag.setOption({
                    series: [{
                        data: IMU_MAG_X_DATA
                    }, {
                        data: IMU_MAG_Y_DATA
                    }, {
                        data: IMU_MAG_Z_DATA
                    }, {
                        data: EKF_IMU_MAG_X_DATA
                    }, {
                        data: EKF_IMU_MAG_Y_DATA
                    }, {
                        data: EKF_IMU_MAG_Z_DATA
                    },
                    ]
                });
                mychart_angle.setOption({
                    series: [{
                        data: IMU_ANGLE_X_DATA
                    }, {
                        data: IMU_ANGLE_Y_DATA
                    }, {
                        data: IMU_ANGLE_Z_DATA
                    }, {
                        data: EKF_IMU_ANGLE_X_DATA
                    }, {
                        data: EKF_IMU_ANGLE_Y_DATA
                    }, {
                        data: EKF_IMU_ANGLE_Z_DATA
                    },
                    ]
                });
                mychart_gyro.setOption({
                    series: [{
                        data: IMU_GYRO_X_DATA
                    }, {
                        data: IMU_GYRO_Y_DATA
                    }, {
                        data: IMU_GYRO_Z_DATA
                    }, {
                        data: EKF_IMU_GYRO_X_DATA
                    }, {
                        data: EKF_IMU_GYRO_Y_DATA
                    }, {
                        data: EKF_IMU_GYRO_Z_DATA
                    },
                    ]
                });
            },
            error: {}
        })
    }

    function video() {
        $.ajax({
            url: '/video/',
            async: true,
            dataType: "html",
            type: 'get',
            success: function (data) {
                $('#image_stream').attr("src", "data:image/png;base64," + data);
            }
        })
    }
</script>
</body>
</html>
